<template>
    <div>
        <div>按钮</div>
        <pl-button label="文本" />
        <pl-button>插槽内容</pl-button>
        <div>按钮状态</div>
        <pl-button v-for="item in ['primary','success', 'warn','error', 'info']" :status="item" :label="item" :key="item"></pl-button>
        <br />
        <pl-my-card v-for="item in ['primary','success', 'warn','error', 'info']" :status="item" :label="item" :key="item"></pl-my-card>
    </div>
    <div class="theme-blue">
        <div>按钮</div>
        <pl-button label="文本" />
        <pl-button>插槽内容</pl-button>
        <div>按钮状态</div>
        <pl-button v-for="item in ['primary','success', 'warn','error', 'info']" :status="item" :label="item" :key="item"></pl-button>
        <br />
        <pl-my-card v-for="item in ['primary','success', 'warn','error', 'info']" :status="item" :label="item" :key="item"></pl-my-card>
    </div>
    <div class="theme-violet">
        <div>按钮</div>
        <pl-button label="文本" />
        <pl-button>插槽内容</pl-button>
        <div>按钮状态</div>
        <pl-button v-for="item in ['primary','success', 'warn','error', 'info']" :status="item" :label="item" :key="item"></pl-button>
        <br />
        <pl-my-card v-for="item in ['primary','success', 'warn','error', 'info']" :status="item" :label="item" :key="item"></pl-my-card>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// import { Input } from 'v3-wxx-ui';

export default defineComponent({
  name: 'App',
    setup() {
        // const inputRef = Input.use.ref('myInput')
        return {
            // outerClear:() => {
            //     inputRef.value!.methods.clear()
            // },
            // outerFocus: () => {
            //     inputRef.value!.methods.focus(false)
            // }
        }
    }
});
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    text-align: center;
}
</style>
